<template>
  <div class="subPage">
    <div class="pageTop">
      <div class="login">您好，请登录</div>
      <div class="tips">
        亲爱的微信平台用户,未注册的用户提交认证后将同时注册<span
          class="textColor"
          >武大云医</span
        >账号
      </div>
      <div class="iptIconDiv clearfix">
        <img :src="phoneImg" class="fl" />
        <input
          class="fl"
          placeholder="请输入手机号码"
          type="number"
          maxlength="11"
          v-model="phone"
          @blur="checkphone(phone)"
          @input="inputFun"
        />
      </div>
      <div class="iptIconDiv clearfix ipt2">
        <img :src="codeImg" class="fl" />
        <input
          class="fl"
          placeholder="请输入验证码"
          type="number"
          maxlength="6"
          v-model="code"
        />
        <span class="code" v-if="phoneStatus && !showCount" @click="getCode"
          >发送验证码</span
        >
        <span class="disCode code" v-if="!phoneStatus && !showCount"
          >发送验证码</span
        >
        <span v-if="showCount" class="disCode code"
          >{{ countNum }}秒后重新获取</span
        >
      </div>
      <div class="clearfix">
        <span class="check fl" v-if="!allowStatus" @click="changeCheck"></span>
        <img
          :src="checkTrueImg"
          v-if="allowStatus"
          @click="changeCheck"
          class="fl checkTrue"
        />
        <span class="fl tipsDiv"
          >我已认真阅读,理解同意<span class="textColor xieyi" @click="look"
            >《互联网医院协议》</span
          ></span
        >
      </div>
    </div>
    <div class="pageBtm">
      <div
        class="bottomDiv"
        v-if="allowStatus && phoneStatus && code.length == 6"
      >
        <span class="recode" @click="post">提交</span>
        <img :src="btnBgImg" />
      </div>
      <div class="bottomDiv" v-else>
        <span class="recode">提交</span>
        <img :src="disBgImg" />
      </div>
      <div class="bottomDiv clearfix">
        <button
          class="loginBtn"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          微信手机号快捷登录
        </button>
      </div>
    </div>
    <!-- 协议弹窗 -->
    <div v-if="modelStatus" class="bg">
      <div class="sure">
        <img :src="closeImg" v-if="countdown" @click="closeTips" />
        <div class="title">互联网医院用户协议</div>
        <div class="text">
          <p>
            武汉大学人民医院互联网医院服务协议（以下简称“本协议“）由您与武汉大学人民医院互联网医院平台共同缔结，本协议具有合同效力。本协议阐述的条款和条件适用于所有使用武汉大学人民医院互联网医院平台（包括但不限于手机客户端、网页端、微信公众平台等）的用户
          </p>
          <p>一、 协议内容及签署</p>
          <p>
            1.
            本协议内容包括协议正文、法律声明及所有武汉大学人民医院互联网医院平台已经发布的或将来可能发布的各类规则、公告或通知（下称“有关规则”）。所有有关规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。
          </p>
          <p>
            2.
            您应在使用服务之前认真审慎阅读，充分理解本协议全部条款内容，在您进行注册程序过程中勾选”我已阅读并同意互联网医院协议”，并点击注册按钮后即表示完全接受本协议项下的全部条款。
          </p>
          <p>
            3.
            您应在使用服务之前认真审慎阅读，充分理解本协议全部条款内容，在您进行注册程序过程中勾选”我已阅读并同意互联网医院协议”，并点击注册按钮后即表示完全接受本协议项下的全部条款。
          </p>
          <p>二、 账户注册</p>
          <p>
            1. 账号主体:
            在您进行账户注册时并在后续使用武汉大学人民医院互联网医院平台服务时，您应当是年满18周岁并具备完全民事权利能力和完全民事行为能力的自然人。若您不具备前述主体资格，则您及您的监护人应承担因此而导致的一切后果，且武汉大学人民医院互联网医院平台有权注销或永久冻结您的账户，并向您及您的监护人索偿相应损失。
          </p>
          <p>
            2. 用户注册:
            在您第一次进入武汉大学人民医院互联网医院平台进行注册时，按照注册页面勾选”我已阅读并同意武汉大学人民医院互联网医院协议”并点击提交后，您即接收本协议及有关规则的约束；
          </p>
          <p>3. 账号信息</p>
          <p>
            （1）您应不时更新您的用户资料，以使之真实、及时、完整和准确，按照监管机构的要求实行实名制就诊。请您如实提供就诊人员的真实姓名、有效证件号（身份证、军官证、护照）、性别、电话、手机号码、病案号等有效基本信息。
          </p>
          <p>
            （2）当您的用户资料发生变动时，应及时的前往武汉大学人民医院互联网医院平台进行更新，以使之真实、完整和准确。如有合理理由怀疑您提供的资料错误、不实、过时或不完整的，武汉大学人民医院互联网医院平台有权向您发出询问及/或要求改正的通知，并有权直接做出删除相应资料的处理，直至中止、终止对您提供部分或全部服务，因此产生的任何直接或间接损失由您个人承担，武汉大学人民医院互联网医院平台不负任何责任；
          </p>
          <p>
            4. 账户安全:
            请您妥善的保存好您的登陆名和用户密码，且须对您在该登陆名和密码下发生的所有活动（包括但不限于信息披露、发布信息、网上点击同意或提交任何有关规则的协议、网上续签协议或购买服务等）承担责任。
          </p>
          <p>5. 账户注销</p>
          <p>
            （1）如您连续三年未登录过武汉大学人民医院互联网医院平台，您的账户可能被注销，不能再登录武汉大学人民医院互联网医院平台进行相应的咨询诊疗服务；
          </p>
          <p>
            （2）如您在武汉大学人民医院互联网医院平台存在涉嫌欺诈、发布或销售假冒伪劣/侵权商品、侵犯他人合法权益或其他违反法律法规的任何规则等行为，武汉大学人民医院由权进行披露，并对您的账户进行注销操作，所有武汉大学人民医院互联网医院平台服务同时终止。
          </p>
          <p>三、 服务内容与规范</p>
          <p>
            1.
            武汉大学人民医院互联网医院平台是通过技术手段实现用户的网上挂号、问诊、获取处方的信息化平台，平台有权根据自身的条件或技术限制进行服务内容或规范要求的调整，而无须提前征得用户的同意或通知到用户，具体服务内容或规范要求以武汉大学人民医院互联网医院平台实际提供的为准；
          </p>
          <p>
            2.
            您在武汉大学人民医院互联网医院平台接收服务的过程中产生的服务纠纷，请根据国家相关法律法规线下调解处理；
          </p>
          <p>
            3.
            您在使用武汉大学人民医院互联网医院平台服务的过程中，所产生的应纳税赋、以及其他硬件、软件、服务及其他方面的费用，均由您自行承担，武汉大学人民医院会对收费服务给与明确提示，如您拒绝支付此类费用，武汉大学人民医院互联网医院平台有权不提供相关服务；
          </p>
          <p>
            4.
            在您使用武汉大学人民医院互联网医院平台服务的过程中，请遵守国家的相关法律、法规和要求，如您违法本协议或触犯国家法律法规，产生任何法律后果的，均由您本人独立承担所有的法律责任；
          </p>
          <p>
            5.
            在您使用武汉大学人民医院互联网医院的过程中，请遵守诚实守信原则，如实陈述病情并提供真实信息，不误导医生的诊疗判断，不扰乱网上服务的正常秩序，不从事与就诊服务无关的行为；
          </p>
          <p>
            6.
            在您需要使用武汉大学人民医院互联网医院为其他人员预约挂号的，请务必是在他人知晓并同意的情况下，并确保所提交信息的真实有效性，如未经他人知晓同意或提交的信息有误所产生的法律后果，由您自行承担；
          </p>
          <p>
            7.
            在您使用武汉大学人民医院互联网医院的过程中，不得发布任何适应国家法律所禁止销售的或限制销售的商品或服务信息（除非取得合法且有效的政府许可），不发布涉嫌侵犯他人知识产权或其它合法权益的商品或服务信息，不发布违背社会公共利益或公共道德或不适合在武汉大学人民医院互联网医院平台销售的商品或服务信息，不发布其它涉嫌违法或违反本协议及有关规则的信息；
          </p>
          <p>
            8.
            不得以虚构或歪曲事实的方式不当评价其他医生或武汉大学人民医院互联网医院平台，不采取不正当方式制造或提高（降低）其他医生或平台的信用度；
          </p>
          <p>
            9.
            不对武汉大学人民医院互联网医院平台的任何数据作商业性利用，包括但不限于在未经武汉大学人民医院互联网医院平台事先书面同意的情况下，以复制、传播等任何方式使用武汉大学人民医院互联网医院平台上展示的资料；
          </p>
          <p>
            10.
            不使用任何装置、软件或例行程序干预或试图干预武汉大学人民医院互联网医院平台的正常运作或正在武汉大学人民医院互联网医院平台上进行的任何服务、活动。您不得采取任何将导致庞大数据负载加诸武汉大学人民医院互联网医院平台网络设备的行动。
          </p>
          <p>
            11.
            武汉大学人民医院互联网医院平台有权对您是否违反本协议做出单认定，并根据单方认定结果的适用有关规则予以处理或终止向您提供服务，且无须征得您的同意或提前通知予您；
          </p>
          <p>
            12.
            经任何国家的行政或司法机关生效的法律文书确认您存在违法或侵权行为的，或者武汉大学人民医院互联网医院平台根据自身的判断，认为您的行为涉嫌违反本协议和/或有关规则的条款或涉嫌违反任何适用法律法规的规定的，则武汉大学人民医院互联网医院平台有权网站上公示您的该等涉嫌违法或违约行为，并按照规定对您采取相应的处罚措施；
          </p>
          <p>
            13.
            若您涉嫌违反有关法律、本协议或任何有关规则对任何第三方造成损害的，您均应当以自己的名义独立承担所有的法律责任；
            使青武汉大学人民医院互联网医院平台遭受任何损失，或受到任何第三方的索赔，或受到任何政府部门的处罚，您应当赔偿因此造成的损失及（或）承担发生的费用。
          </p>
          <p>四、 责任范围及免责</p>
          <p>
            1.
            武汉大学人民医院互联网医院平台根据自身的实际情况及技术限制向您提供互联网就诊服务，但武汉大学人民医院互联网医院平台不对服务所涉及的技术及信息的有效性、准确性、正确性、可靠性、质量、稳定、完整和及时性作出任何承诺和保证。
          </p>
          <p>
            2.
            武汉大学人民医院互联网医院平台上的信息由医疗机构自行分布，且可能存在风险和瑕疵。武汉大学人民医院互联网医院平台仅作为您获取物品或服务信息、物色服务对象、就服务进行协商及开展服务的场所，武汉大学人民医院互联网医院平台无法控制服务所涉及的物品的质量、安全或合法性，商贸信息的真实性或准确性，以及服务各方履行其在贸易协议中各项义务的能力。您应自行谨慎判断确定相关物品、信息或服务的真实性、合法性和有效性，并自行承担因此产生的责任与损失；
          </p>
          <p>
            3.
            除非法律法规明确要求，否则武汉大学人民医院互联网医院平台没有义务对所有用户的信息数据、商品（服务）信息、服务行为以及与服务有关的其它事项进行事先审查。但如出现以下情况，则武汉大学人民医院互联网医院平台有权对用户的信息数据、商品（服务）信息、服务行为、以及有关的其他事项进行事先审查：
          </p>
          <p>
            （1）武汉大学人民医院互联网医院平台有合理的理由认为特定会员及具体服务事项可能存在重大违法或违约情形；
          </p>
          <p>
            （2）武汉大学人民医院互联网医院平台有合理的理由认为用户在武汉大学人民医院互联网医院平台的行为涉嫌违法或不当。
          </p>
          <p>
            4.
            武汉大学人民医院互联网医院平台不对因下述任一情况而导致您的任何损害赔偿承担责任，包括但不限于医疗纠纷、人身损害、精神损害、利润、商誉、使用、数据等方面的损失或其它无形损失的损害赔偿:
          </p>
          <p>（1）使用或未能使用服务；</p>
          <p>（2）第三方未经批准的使用您的账户或更改您的数据；</p>
          <p>
            （3）接受医疗服务、医疗咨询等行为或替代行为或相关行为产生的费用及损失；用户自行更改医生处方药品药量出现的安全问题由用户自行承担；若是因药品的质量及药师调配问题则由提供药品的药店负责。
          </p>
          <p>
            （4）任何非因武汉大学人民医院互联网医院平台的原因而引起的与服务有关的其它损失。医院或平台运营机构不担保提供的远程医疗服务一定能满足用户的要求，也不担保远程医疗服务不会中断，对远程医疗服务的及时性、安全性、准确性也都不作担保。使用远程医疗服务所存在的风险将完全由用户自己承担；医院或平台运营机构对用户不承担因远程医疗服务产生的任何责任；
          </p>
          <p>（5）您未能仔细阅读服务协议或对服务的误解；</p>
          <p>
            5.
            武汉大学人民医院互联网医院平台均不对由于武汉大学人民医院互联网医院平台信息网络正常的设备维护、信息网络连接故障、电脑、通讯或其他系统的故障，电力故障，罢工，劳动争议，暴乱，起义，骚乱，生产力或生产资料不足，火灾，洪水，风暴，爆炸，战争，政府行为，司法行政机关的命令或第三方的不作为而造成的不能服务或延迟服务承担责任。
          </p>
          <p>五、 隐私政策保护</p>
          <p>
            1. 武汉大学人民医院互联网医院平台重视用户的隐私保护，
            “隐私”是指用户在注册账号时提供的个人身份信息，包括用户注册资料中的姓名、性别、个人有效身份证件号码、联系方式、家庭住址等。武汉大学人民医院互联网医院平台保证不对外公开或向第三方提供用户注册资料及用户在使用平台服务时存储的非公开内容，但下列情况除外：
          </p>
          <p>（1）用户或用户监护人授权武汉大学人民医院互联网医院平台披露的；</p>
          <p>（2）应用户监护人的合法要求而提供用户个人身份信息时；</p>
          <p>（3）有关法律要求披露的；</p>
          <p>（4）司法机关或行政机关基于法定程序要求提供的；</p>
          <p>
            （5）武汉大学人民医院互联网医院平台为了维护自己合法权益而向用户提起诉讼或者仲裁时；
          </p>
          <p>
            （6）武汉大学人民医院互联网医院平台正常应用、学术交流及讨论的目的时；
          </p>
          <p>
            2.
            武汉大学人民医院互联网医院平台可能会与第三方合作为用户提供相关的服务，在此情况下，如该第三方同意承担与武汉大学人民医院互联网医院平台同等的保护用户隐私的责任，则武汉大学人民医院互联网医院平台可将用户的注册资料（包括姓名、性别、个人有效身份证件号码、联系方式、家庭住址等）提供给该第三方；
          </p>
          <p>
            3.
            在不透露单个用户隐私资料的前提下，武汉大学人民医院互联网医院平台有权对整个用户数据库进行分析并对用户数据库进行商业上的利用;
          </p>
          <p>六、 法律及适用范围</p>
          <p>
            1.
            凡以任何方式注册、登陆或直接、间接使用武汉大学人民医院互联网医院平台者，均视为同意武汉大学人民医院互联网医院协议的约束；
          </p>
          <p>
            2.
            本协议之效力、解释、变更、执行与争议解决均适用均适用中华人民共和国大陆地区法律，如无相关法律规定的，则应参照通用国际商业惯例和/或行业惯例；
          </p>
          <p>
            3.
            一旦产生争议，您与武汉大学人民医院互联网医院平台的运营者均同意以被告所在地人民法院为第一审管辖法院。
          </p>
        </div>
        <div class="agren">
          <span class="agrenBtn" @click="agree" v-if="countdown || time === 0"
            >已阅读并同意</span
          >
          <span v-else class="countdow">剩余{{ time }}秒</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/api";
export default {
  data() {
    return {
      phone: "",
      code: "",
      countNum: 60,
      showCount: false,
      allowStatus: false, // 是否同意协议
      phoneStatus: false, // 手机号码是否合格状态
      openid: "",
      modelStatus: false, // 协议弹窗状态
      timer: null,
      key: "",
      timer: null,
      countdown: false,
      time: 10,
      source: "0",
      headImg: "",
      flag: true,
      imgUrl: "",
      phoneImg: "",
      codeImg: "",
      checkTrueImg: "",
      btnBgImg: "",
      disBgImg: "",
      closeImg: "",
    };
  },
  onShow() {
    let storageSource = this.$storage.getSouruce();
    this.flag = true;
    this.source = storageSource ? storageSource : "0";
    this.imgUrl = api.imgUrl;
    this.phoneImg = this.imgUrl + "phone.png";
    this.codeImg = this.imgUrl + "code.png";
    this.checkTrueImg = this.imgUrl + "checkTrue.png";
    this.btnBgImg = this.imgUrl + "btnBg.png";
    this.disBgImg = this.imgUrl + "disBg.png";
    this.closeImg = this.imgUrl + "close.png";
    this.queryimg();
  },
  mounted() {
    let that = this;
    // this.wxLogin()
    // wx.checkSession({
    //   success () {
    //     //session_key 未过期，并且在本生命周期一直有效
    //     console.log('有效')
    //   },
    //   fail () {
    //   }
    // })
    that.wxLogin();
  },
  methods: {
    queryimg() {
      let that = this;
      mpvue.getUserInfo({
        success: function (res) {
          var userInfo = res.userInfo;
          that.headImg = userInfo.avatarUrl;
        },
      });
    },
    // 监听手机号码改变事件  如果是11位切检测合格  可以发送验证码 不用等失焦事件
    inputFun(e) {
      let phone = e.mp.detail.value;
      if (phone.length !== 11) {
        this.phoneStatus = false;
        return;
      }
      if (phone.length === 11) {
        if (!/^1[345789]\d{9}$/.test(phone)) {
          this.phoneStatus = false;
        } else {
          this.phoneStatus = true;
        }
      }
    },
    // 获取验证码
    getCode() {
      let that = this;
      that.$api
        .getSmsAuthCode({ phone: that.phone }, { showLoading: true })
        .then(function (res) {
          that.setTimeoutTime = setInterval(() => {
            // ok
            if (that.countNum === 1) {
              that.showCount = false;
              that.countNum = 60;
              clearInterval(that.setTimeoutTime);
            } else {
              that.showCount = true;
              that.countNum--;
            }
          }, 1000);
          that.$utils.showToast("text", "验证码发送成功,请注意查收");
        });
    },
    // 检验手机号码是合格
    checkphone(mobile) {
      this.phoneStatus = false;
      if (mobile == "") {
        return;
      }
      if (!/^1[345789]\d{9}$/.test(mobile)) {
        this.phoneStatus = false;
        this.$utils.showToast("text", "请输入正确的手机号");
      } else {
        this.phoneStatus = true;
      }
    },
    // 点击同意协议按钮
    agree() {
      this.modelStatus = false;
      this.allowStatus = true;
    },
    // 关闭提示
    closeTips() {
      this.modelStatus = false;
    },
    // 点击复选框
    changeCheck() {
      let that = this;
      if (that.allowStatus) {
        that.allowStatus = false;
      } else {
        that.time = 10;
        that.modelStatus = true;
        that.countdown = false;
        that.timer = setInterval(() => {
          if (that.time === 0) {
            clearInterval(that.timer);
            that.time = 10;
            that.countdown = true;
          }
          that.time--;
        }, 1000);
      }
    },
    look() {
      let that = this;
      if (that.allowStatus) {
        that.modelStatus = true;
        that.countdown = true;
      } else {
        that.time = 10;
        that.modelStatus = true;
        that.countdown = false;
        that.timer = setInterval(() => {
          if (that.time === 0) {
            clearInterval(that.timer);
            that.time = 10;
            that.countdown = true;
          }
          that.time--;
        }, 1000);
      }
    },
    post() {
      let that = this;
      if (that.code.length === "" || that.code.length !== 6) {
        that.$utils.showToast("text", "请输入正确的6位数验证码");
        return;
      }
      if (that.flag) {
        that.flag = false;
        let obj = {
          source: that.source,
          openid: that.openid,
          login_name: that.phone,
          verify_code: that.code,
          session_key: that.key,
          avatar_url: that.headImg,
        };
        that.$api.bindPhone(obj, { showLoading: true }).then((res) => {
          if (res.data.token) {
            that.$storage.setToken(res.data.token);
          }
          that.$router.push(
            `/pages/center/child/loginTips/main?phone=${that.phone}&type=${res.data.type}&pwd=${res.data.init_pd}`
          );
        });
        that.flag = true;
      }
    },
    wxLogin() {
      let that = this;
      mpvue.login({
        success(res) {
          that.$api.wechatLogin({ code: res.code }).then((data) => {
            that.openid = data.data.openid;
            that.key = data.data.session_key;
            if (data.data.token) {
              // that.$storage.setToken(data.data.token);
              // that.$api.userInfo().then((data) => {
              //   console.log(data)
              // })
            }
          });
        },
      });
    },
    bindGetUserInfo(e) {
      if (e.mp.detail.rawData) {
        wx.setStorage({
          key: "userInfo",
          data: e.mp.detail.rawData,
        });
      }
    },
    getPhoneNumber(e) {
      let that = this;
      let obj = {};
      if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
        obj = {
          openid: that.openid,
          encrypted_data: e.mp.detail.encryptedData,
          iv: e.mp.detail.iv,
          source: that.source,
          session_key: that.key,
          avatar_url: that.headImg,
        };
        console.log("allowStatus:", this.allowStatus);
        if (!this.allowStatus) {
          that.$utils.showToast("text", "请先阅读勾选协议");
          return;
        }
        console.log("getPhoneNumber", obj);
        that.$api.bindPhone(obj, { showLoading: true }).then((res) => {
          if (res.data.token) {
            that.$storage.setToken(res.data.token);
          }
          setTimeout(function () {
            mpvue.reLaunch({
              url: `/pages/center/child/loginTips/main?phone=${res.data.phone}&type=${res.data.type}&pwd=${res.data.init_pd}`,
            });
          }, 1000);
        });
      } else {
        that.$utils.showToast("text", "微信手机号授权失败");
      }
    },
  },
};
</script>
<style scoped lang="less">
.pageTop {
  margin: 60rpx 60rpx 23rpx 60rpx;
  .login {
    font-size: 36rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 50rpx;
    margin-bottom: 10rpx;
  }
  .tips {
    font-size: 24rpx;
    font-weight: 300;
    color: rgba(153, 153, 153, 1);
    line-height: 33rpx;
    margin-bottom: 49rpx;
  }
  .iptIconDiv {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #cccccc;
    display: flex;
    img {
      width: 50rpx;
      height: 50rpx;
      margin-right: 10rpx;
    }
    input {
      flex: 1;
      margin-top: 4rpx;
    }
    .code {
      display: inline-block;
      margin-top: 4rpx;
      color: #258ff8;
      font-size: 30rpx;
      font-weight: 400;
      line-height: 42rpx;
    }
    .disCode {
      color: #cccccc !important;
    }
  }
  .ipt2 {
    margin-top: 56rpx;
    margin-bottom: 39rpx;
  }
  .box {
    margin-right: 10rpx;
  }
  .tipsDiv {
    height: 30rpx;
    line-height: 30rpx;
    display: inline-block;
    font-size: 30rpx;
  }
  .checkTrue {
    height: 32rpx;
    width: 32rpx;
    display: inline-block;
    margin-right: 20rpx;
  }
  .check {
    display: inline-block;
    margin-right: 20rpx;
    width: 32rpx;
    height: 32rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 5rpx;
    border: 2rpx solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
  }
}
.pageBtm {
  .loginBtn {
    margin: 10rpx 30rpx 0 30rpx;
    background: #02b87f;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
  }
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  .sure {
    z-index: 2;
    width: 640rpx;
    height: 840rpx;
    background: #fff;
    position: relative;
    left: 50%;
    top: 50%;
    margin-left: -320rpx;
    margin-top: -420rpx;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
    img {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: -30rpx;
      top: -30rpx;
      z-index: 10;
    }
    .title {
      height: 48rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 48rpx;
      text-align: center;
      margin: 59rpx 0 24rpx;
    }
    .text {
      padding: 0 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      color: #666666;
      flex: 1;
      overflow-y: auto;
    }
    .agren {
      text-align: center;
      margin-top: 20rpx;
      margin-bottom: 43rpx;
      .agrenBtn {
        height: 76rpx;
        line-height: 76rpx;
        display: inline-block;
        padding: 0 180rpx;
        background: #4a64ea;
        font-size: 28rpx;
        color: #fff;
        border-radius: 38rpx;
      }
      .countdow {
        height: 76rpx;
        line-height: 76rpx;
        display: inline-block;
        color: red;
        font-size: 28rpx;
      }
    }
  }
}
.xieyi {
  padding: 30rpx 0;
}
</style>
